<template>
  <div>
    <el-container>
      <!-- 顶栏 -->
      <div class="header">
        <!-- 回到顶部 -->
        <el-backtop :visibility-height="500" :right="10">
          <i class="el-icon-caret-top" style="display: block"></i>
        </el-backtop>
        <div style="width: 1190px; margin: 0 auto">
          <a href="/login" class="hd_nav">亲，请登录</a>
          &nbsp;&nbsp;
          <a href="/register" class="hd_nav">免费注册</a>
          <div style="float: right">
            <a href="/myorder" class="hd_nav">我的订单</a>
            <el-divider direction="vertical"></el-divider>
            <a href="/" class="hd_nav">我的就爱</a>
            <el-divider direction="vertical"></el-divider>
            <a href="/admin" class="hd_nav">就爱卖家中心</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#" class="hd_nav">联系客服</a>
          </div>
        </div>
      </div>
      <div class="container">
        <!-- 头部 -->
        <div class="top">
          <!-- Logo -->
        <a href="/" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
          <!-- 搜索框 -->
          <div class="search">
            <el-input
              placeholder="请输入内容"
              v-model="input"
              type="text"
              clearable
            >
              <el-button
                id="frame"
                slot="append"
                icon="el-icon-search"
                @click="search"
              ></el-button>
            </el-input>
            <el-badge class="shopping_cart">
              <el-button
                type="mini"
                style="
                  color: #e1251b;
                  font-size: 15px;
                  background: rgba(255, 0, 0, 0);
                "
                icon="el-icon-shopping-cart-full"
                class="btn"
                @click="goshoppingcart"
                >我的购物车</el-button
              >
            </el-badge>
          </div>
        </div>
      </div>
      <!-- 广告链接 -->
      <img src="../../assets/guangao.png" alt="" />
      <!-- 面包屑 -->
      <el-header style="height: 20px"
        ><a href="/" style="margin-left: 10%">手机通讯</a>><a
          href=""
          class="Navigationindentation"
          >手机</a
        >><a href="/" class="Navigationindentation">手机</a>>
        <el-dropdown class="Navigationindentation">
          <div class="el-dropdown-link" style="color: black">
            小米<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>小米</el-dropdown-item>
            <el-dropdown-item>华为</el-dropdown-item>
            <el-dropdown-item>一加</el-dropdown-item>
            <el-dropdown-item>魅族</el-dropdown-item>
          </el-dropdown-menu> </el-dropdown
        ><a href="/" class="Navigationindentation">小米10S</a></el-header
      >
      <!-- 内容主体 -->
      <el-card class="mainpart">
        <!-- 商品信息上半部分 -->
        <el-card class="merchandise">
          <!-- 左侧商品图 -->
          <el-card class="bodyleft">
            <el-carousel
              height="400px"
              :initial-index="index"
              :autoplay="isautoplay"
              arrow="never"
              indicator-position="none"
              ref="carousel"
            >
              <el-carousel-item
                v-for="n in bigImg"
                :key="n.id"
                :name="numToStr(n.id)"
              >
                <img :src="n.img" alt="" class="bodyleftimg" />
              </el-carousel-item>
            </el-carousel>
            <!-- 左侧小图 -->
            <div class="bodyleftimgsmallbody">
              <div
                class="bodyleftimgsmallbodys"
                v-for="n in smallImg"
                :key="100 + n.id"
                :name="numToStr(n.id)"
              >
                <img
                  :src="n.img"
                  alt=""
                  class="bodyleftimgsmall"
                  @click="setActiveItem(n.id - 1)"
                />
              </div>
            </div>
          </el-card>
          <!-- 右侧商品规格 -->
          <el-card class="bodyright">
            <!-- 标题 -->
            <b class="Commoditytitle">{{
              Commodityinformation.commodityName
            }}</b>
            <!-- 关键词 -->
            <p class="titleantistop">
              {{ Commodityinformation.commodityIntroduce }}
              <!-- <a
                href=""
                class="titleantistopa"
                >查看></a
              > -->
            </p>
            <!-- 价格 -->
            <div class="pricebody">
              <label class="pricetitle">价格</label>
              <b class="price" :v-model="price">￥{{ price }}</b>
            </div>
            <!-- 颜色选择 -->
            <div class="Choosecolorbody">
              <label class="Choosecolor">选择颜色</label>
              <!-- 颜色选择选项 -->
              <div>
                <el-radio-group
                  v-model="choosecolor"
                  class="colorbuttons"
   
                >
                  <el-radio-button
                    class="colorbutton"
                    v-for="color in Color"
                    :key="color"
                    :label="color"
                    @click="colorchange"
                  ></el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <!-- 大小选择 -->
            <div class="Choosesizebody">
              <div class="Choosesize">
                <label>选择大小</label>
              </div>
              <!-- 大小选择选项 -->
              <div>
                <el-radio-group
                  v-model="choosesize"
                  class="sizebuttons"
                  @change="sizechange"
                >
                  <el-radio-button
                    class="sizebutton"
                    v-for="size in Size"
                    :key="size"
                    :label="size"
                  ></el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <!-- 数量选择 -->
            <div class="chooseamountbody">
              <div class="chooseamount">
                <label>数量</label>
                <span>
                  <el-input-number
                    v-model="num"
                    @change="handleChange"
                    :min="1"
                    :max="99"
                    class="numberinput"
                  ></el-input-number>
                </span>
              </div>
              <label class="number">（库存{{ stock }}件）</label>
            </div>
            <!-- 购买 -->
            <div class="buybody">
              <button class="buybutton">立即购买</button>
              <button class="buybutton2" @click="addshopping">
                <i class="el-icon-shopping-cart-full"></i>加入购物车
              </button>
            </div>
          </el-card>
        </el-card>

        <!-- 商品信息下半部分 -->
        <el-card class="merchandisenext">
          <!-- 下半部分的左半部分商铺详情整体 -->
          <el-card class="merchandisenextleft">
            <el-card :v-model="shop">
              <b class="Shopname">{{ shop.shopname }}</b>
              <hr />
              <p>描述:{{ shop.describe }}</p>
              <p>服务:{{ shop.serve }}</p>
              <p>物流:{{ shop.logistics }}</p>
            </el-card>
          </el-card>
          <!-- 下半部分右半部分图片详情 -->
          <el-card class="merchandisenextright">
            <!-- 选项卡 -->
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="宝贝详情" name="productdetails">
                <div
                  v-for="n in detailspicture"
                  :key="1000 + n.id"
                  class="detailspicture"
                >
                  <img :src="n.img" alt="" />
                </div>
              </el-tab-pane>
              <el-tab-pane label="所有参数" name="allparameter">
                <ul>
                  <li>11</li>
                </ul>
              </el-tab-pane>
            </el-tabs>

            <!-- 价格说明 -->
            <div class="bottomprice">
              <b class="priceexplain">价格说明</b>
              <hr />
              <p class="lineationprice">划线价格</p>
              <label class="labelexplain"
                >指商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</label
              >
              <p class="lineationprice">未划线价格</p>
              <label class="labelexplain"
                >指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</label
              >
              <p></p>
              <label class="labelexplain">
                商家详情页（含主图）以图片或文字形式标注的一口价、促销价、优惠价等价格可能是在使用优惠券、满减或特定优惠活动和时段等情形下的价格，具体请以结算页面的标价、优惠条件或活动规则为准。
              </label>
              <p></p>
              <label class="labelexplain"
                >此说明仅当出现价格比较时有效，具体请参见《淘宝价格发布规范》。若商家单独对划线价格进行说明的，以商家的表述为准。</label
              >
            </div>
          </el-card>
        </el-card>
      </el-card>
    </el-container>
  </div>
</template>

<style scoped>
/* 顶栏 */
.header {
  height: 35px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
}
/* 容器 */
.container {
  width: 1190px;
  margin: 0 auto;
}

/* 头部 */
.top {
  padding-top: 24px;
  height: 98px;
}

/* Logo */
.logo {
  width: 190px;
  height: 80px;
  float: left;
  /* margin-top: 8px; */
  margin: 8px 0 0 20px;
}
/* 鼠标移到到logo变小手 */
.logo:hover {
  cursor: pointer;
}

/* 搜索框 */
.search {
  margin-left: 350px;
  line-height: 80px;
  width: 600px;
}

/* 搜索按钮 */
#frame {
  background-color: #ff5000;
  font-size: 15px;
  border-radius: 1;
  color: #f5f5f5;
}

/* 购物车 */
.shopping_cart {
  margin-top: -164px;
  margin-left: 630px;
}

/* 面包屑整体大小 */
.el-header {
  background-color: #ebedf0d7;
}
/* 面包屑内容间隔 */
.Navigationindentation {
  margin-left: 1%;
}
/* 内容主体 */
.mainpart {
  width: 100%;
  height: 100%;
}
/* 内容主体上半部分 */
.merchandise {
  width: 100%;
  height: 100%;
}
/* 内容主体上半部分的左半部分整体 */
.bodyleft {
  width: 28%;
  margin-left: 10%;
  height: 510px;
  float: left;
  margin-right: 1%;
}
/* 主体上半部分的左侧商品轮播图片 */
.bodyleftimg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
/* 轮播小图组 */
.bodyleftimgsmallbody {
  width: 100%;
  height: 180px;
}
/* 轮播小图 */
.bodyleftimgsmallbodys {
  width: 19%;
  float: left;
  margin-left: 2px;
}
/* 轮播小图鼠标移动显示边框 */
.bodyleftimgsmallbodys:hover {
  border-style: solid;
  border-color: black;
  border-width: 2px;
}
/* 轮播图小图等比例缩放 */
.bodyleftimgsmall {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* 主体右侧商品信息整体 */
.bodyright {
  width: 60%;
  height: 700px;
}
/* 商品标题 */
.Commoditytitle {
  font-size: 25px;
}
/* 商品关键信息 */
.titleantistop {
  color: red;
}
/* 商品关键信息的查看按钮 */
.titleantistopa {
  color: rgba(55, 55, 216, 0.788);
}
/* 价格整体部分 */
.pricebody {
  width: 90%;
  height: 60px;
  padding-top: 20px;
}
/* 价格两字 */
.pricetitle {
  margin-left: 20px;
  font-size: 20px;
}
/* 价格数据 */
.price {
  margin-left: 20px;
  font-size: 30px;
  color: red;
}
/* 选择颜色整体部分 */
.Choosecolorbody {
  width: 90%;
  background-color: white;
  height: 150px;
}
/* 选择颜色四字 */
.Choosecolor {
  width: 10%;
  height: 20px;
  margin-left: 1%;
}
/* 选择颜色按钮组整体样式布局 */
.colorbuttons {
  float: left;
  width: 50%;
  margin-left: 15%;
  margin-top: -30px;
}
/* 选择颜色按钮 */
.colorbutton {
  margin-left: 10px;
  margin-top: 15px;
  border-style: solid;
  border-width: 1px;
}
/* 选择颜色按钮鼠标移动增加边框 */
.colorbutton:hover {
  margin-left: 10px;
  margin-top: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}
/* 选择大小整体部分 */
.Choosesizebody {
  width: 90%;
  height: 150px;
}
/* 选择大小四字 */
.Choosesize {
  width: 10%;
  height: 20px;
  margin-left: 1%;
}
/* 选择大小按钮组整体样式布局 */
.sizebuttons {
  float: left;
  width: 50%;
  margin-left: 15%;
  margin-top: -30px;
}
/* 选择大小按钮 */
.sizebutton {
  margin-left: 10px;
  margin-top: 15px;
  border-style: solid;
  border-width: 1px;
}
/* 选择大小鼠标移动增加边框 */
.sizebutton:hover {
  margin-left: 10px;
  margin-top: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}
/* 购买数量整体 */
.chooseamountbody {
  width: 90%;
  height: 100px;
}
/* 购买数量 */
.chooseamount {
  width: 10%;
  height: 20px;
  margin-left: 1%;
}
/* 计数器 */
.numberinput {
  margin-left: 140px;
}
/* 库存 */
.number {
  margin-left: 45%;
}
/* 立即购买和加入购物车整体 */
.buybody {
  margin-left: 10%;
}
/* 立即购买按钮 */
.buybutton {
  width: 15%;
  height: 50px;
  font-size: 20px;
  color: rgba(146, 78, 78, 0.685);
  background-color: rgba(172, 133, 133, 0.795);
}
/* 加入购物车按钮 */
.buybutton2 {
  width: 20%;
  font-size: 20px;
  height: 50px;
  color: rgba(221, 164, 164, 0.685);
  background-color: rgb(153, 116, 47);
}
/* 立即购买鼠标移动增加边框 */
.buybutton:hover {
  color: red;
}
/* 加入购物车鼠标移动增加边框 */
.buybutton2:hover {
  color: red;
}
/* 主体下半部分整体 */
.merchandisenext {
  margin-top: 10px;
  width: 100%;
  height: 100%;
}
/* 主体下半部分左半部分商铺详情整体 */
.merchandisenextleft {
  width: 20%;
  float: left;
  height: 300px;
  margin-right: 1%;
}
/* 主体下半部分右半部分图片详情 */
.merchandisenextright {
  width: 78%;
  height: 100%;
}
/* 商铺名称 */
.Shopname {
  margin-left: 30%;
}
/* 选项卡 */
.TabControl {
  width: 200px;
}

/* 商品详情图 */
.detailspicture {
  margin-left: 10%;
}
/* 底部价格整体布局 */
.bottomprice {
  margin-top: 50px;
  width: 70%;
}
/* 价格说明 */
.priceexplain {
  font-size: 20px;
}
/* 划线价格 */
.lineationprice {
  font-size: 15px;
  color: red;
}
/* 价格文本说明 */
.labelexplain {
  font-size: 10px;
}
</style>

<script>
import { selectonecommodity, addshoppingcart } from "../../api/commodity";
export default {
  data() {
    return {
      activeName: "productdetails",
      index: 2,
      Commodityinformation: { commodityName: "", introduce: "" },
      isautoplay: false,
      bigImg: [
        {
          id: 1,
          img: require("../../assets/imgs/1.jpg"),
        },
        {
          id: 2,
          img: require("../../assets/imgs/2.png"),
        },

        {
          id: 3,
          img: require("../../assets/imgs/3.png"),
        },

        {
          id: 4,
          img: require("../../assets/imgs/4.png"),
        },

        {
          id: 5,
          img: require("../../assets/imgs/5.png"),
        },
      ],
      detailspicture: [
        {
          id: 1,
          img: require("../../assets/imgs/100.jpg"),
        },
        {
          id: 2,
          img: require("../../assets/imgs/101.jpg"),
        },
        {
          id: 3,
          img: require("../../assets/imgs/102.jpg"),
        },
        {
          id: 4,
          img: require("../../assets/imgs/103.jpg"),
        },
        {
          id: 5,
          img: require("../../assets/imgs/104.jpg"),
        },
        {
          id: 6,
          img: require("../../assets/imgs/105.jpg"),
        },
        {
          id: 7,
          img: require("../../assets/imgs/106.jpg"),
        },
        {
          id: 8,
          img: require("../../assets/imgs/107.jpg"),
        },
        {
          id: 9,
          img: require("../../assets/imgs/108.jpg"),
        },
        {
          id: 10,
          img: require("../../assets/imgs/109.jpg"),
        },
        {
          id: 11,
          img: require("../../assets/imgs/110.jpg"),
        },
        {
          id: 12,
          img: require("../../assets/imgs/111.jpg"),
        },
        {
          id: 13,
          img: require("../../assets/imgs/112.jpg"),
        },
        {
          id: 14,
          img: require("../../assets/imgs/113.jpg"),
        },
        {
          id: 15,
          img: require("../../assets/imgs/114.jpg"),
        },
        {
          id: 16,
          img: require("../../assets/imgs/115.jpg"),
        },
        {
          id: 17,
          img: require("../../assets/imgs/116.jpg"),
        },
        {
          id: 18,
          img: require("../../assets/imgs/117.jpg"),
        },
        {
          id: 19,
          img: require("../../assets/imgs/118.jpg"),
        },
        {
          id: 20,
          img: require("../../assets/imgs/119.jpg"),
        },
        {
          id: 21,
          img: require("../../assets/imgs/120.jpg"),
        },
        {
          id: 22,
          img: require("../../assets/imgs/121.jpg"),
        },
        {
          id: 23,
          img: require("../../assets/imgs/122.jpg"),
        },
        {
          id: 24,
          img: require("../../assets/imgs/123.jpg"),
        },
        {
          id: 25,
          img: require("../../assets/imgs/124.jpg"),
        },
        {
          id: 26,
          img: require("../../assets/imgs/125.jpg"),
        },
        {
          id: 27,
          img: require("../../assets/imgs/126.jpg"),
        },
        {
          id: 28,
          img: require("../../assets/imgs/127.jpg"),
        },
        {
          id: 29,
          img: require("../../assets/imgs/128.jpg"),
        },
      ],
      smallImg: [
        {
          id: 1,
          img: require("../../assets/imgs/1.jpg"),
        },
        {
          id: 2,
          img: require("../../assets/imgs/2.png"),
        },

        {
          id: 3,
          img: require("../../assets/imgs/3.png"),
        },

        {
          id: 4,
          img: require("../../assets/imgs/4.png"),
        },

        {
          id: 5,
          img: require("../../assets/imgs/5.png"),
        },
      ],
      choosecolor: "",
      choosesize: "",
      input: "",
      stock: 99,
      num: 1,
      price: 0,
      Size: ["8+64", "8+128", "8+256", "12+64", "12+128", "12+256"],
      Color: [
        "暗夜之美",
        "流云之境",
        "金玉锦绣",
        "天空之境",
        "冰雾蓝",
        "玫瑰金",
      ],
      //测试数据
      specification: [
        { '"暗夜之美","8+64"': [2699, 99] },
        { '"暗夜之美","8+128"': [2799, 94] },
        { '"暗夜之美","8+256"': [2899, 95] },
        { '"暗夜之美","12+64"': [2699, 92] },
        { '"暗夜之美","12+128"': [2799, 45] },
        { '"暗夜之美","12+256"': [2899, 21] },
        { '"流云之境","8+64"': [2699, 47] },
        { '"流云之境","8+128"': [2799, 75] },
        { '"流云之境","8+256"': [2899, 83] },
        { '"流云之境","12+64"': [2699, 26] },
        { '"流云之境","12+128"': [2799, 59] },
        { '"流云之境","12+256"': [2899, 85] },
        { '"金玉锦绣","8+64"': [2899, 74] },
        { '"金玉锦绣","8+128"': [2899, 55] },
        { '"金玉锦绣","8+256"': [2899, 85] },
        { '"金玉锦绣","12+64"': [2899, 74] },
        { '"金玉锦绣","12+128"': [2899, 55] },
        { '"金玉锦绣","12+256"': [2899, 85] },
        { '"天空之境","8+64"': [2899, 74] },
        { '"天空之境","8+128"': [2899, 55] },
        { '"天空之境","8+256"': [2899, 85] },
        { '"天空之境","12+64"': [2899, 74] },
        { '"天空之境","12+128"': [2899, 55] },
        { '"天空之境","12+256"': [2899, 85] },
        { '"冰雾蓝","8+64"': [2899, 74] },
        { '"冰雾蓝","8+128"': [2899, 55] },
        { '"冰雾蓝","8+256"': [2899, 85] },
        { '"冰雾蓝","12+64"': [2899, 74] },
        { '"冰雾蓝","12+128"': [2899, 55] },
        { '"冰雾蓝","12+256"': [2899, 85] },
        { '"玫瑰金","8+64"': [2899, 74] },
        { '"玫瑰金","8+128"': [2899, 55] },
        { '"玫瑰金","8+256"': [2899, 85] },
        { '"玫瑰金","12+64"': [2899, 74] },
        { '"玫瑰金","12+128"': [2899, 55] },
        { '"玫瑰金","12+256"': [2899, 85] },
      ],
      shop: {
        shopname: "机御旗舰店",
        describe: 4.8,
        logistics: 4.2,
        serve: 4.7,
      },
    };
  },
  methods: {
    numToStr(num) {
      num = num.toString();
      return num;
    },
    goshoppingcart() {
      this.$router.push("/shoppingcart");
    },
    search() {
      this.$router.push("/search");
    },
    select() {
      console.log(this.$route.query.key);
      selectonecommodity(this.$route.query.key)
        .then((data) => {
          console.log(data.data);
          this.Commodityinformation.commodityName = data.data[0].commodityName;
          this.Commodityinformation.commodityIntroduce = data.data[0].commodityIntroduce;
          this.Commodityinformation.commodityId = data.data[0].commodityId;
          this.price = data.data[0].money;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    setActiveItem(index) {
      this.$refs.carousel.setActiveItem(index);
    },
    //计数器数量改变时的事件
    handleChange(value) {
      console.log(value);
    },
    colorchange() {
      if (this.choosesize != "") {
        let specificationName = `${this.choosecolor},${this.choosesize}`;
        console.log(specificationName);
        for (var i = 0; i < this.specification.length - 1; i++) {
          if (this.specification[i][specificationName] != undefined) {
            console.log(this.specification[i][specificationName]);
            this.price = this.specification[i][specificationName][0];
            this.stock = this.specification[i][specificationName][1];
          }
        }
      }
    },
    sizechange() {
      if (this.choosesize != "") {
        let specificationName = `"${this.choosecolor}","${this.choosesize}"`;
        for (var i = 0; i < this.specification.length - 1; i++) {
          if (this.specification[i][specificationName] != undefined) {
            console.log(this.specification[i][specificationName]);
            this.price = this.specification[i][specificationName][0];
            this.stock = this.specification[i][specificationName][1];
          }
        }
      }
    },
    addshopping() {
      let specificationName = `${this.choosecolor},${this.choosesize}`;
      console.log(
        1,
        this.Commodityinformation.commodityId,
        specificationName,
        this.num,
        this.price
      );
      if (this.choosecolor == "" && this.choosesize == "") {
        this.$message.error("请选择规格参数哦");
      } else if (this.choosesize == "") {
        this.$message({
          message: "请选择大小哦",
          type: "warning",
        });
      } else if (this.choosecolor == "") {
        this.$message({
          message: "请选择颜色哦",
          type: "warning",
        });
      } else {
        addshoppingcart(
          1,
          this.Commodityinformation.commodityId,
          specificationName,
          this.num,
          this.price
        )
          .then((data) => {
            this.$message({
              message: "加入购物车成功",
              type: "success",
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  mounted() {
    this.select();
  },
};
</script>